<div class="panel panel-default panel-widget">
    <div class="panel-body" style="background-color: #fff;padding: 10px ">
        <table id="bootpag-example" class="table table-striped table-bordered table-hover" >
            <thead>
                <tr>
                    <th>名称</th>
                    <th>职位</th>
                    <th>办公地点</th>
                    <th>薪资</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Thor Walton</td>
                    <td>Developer</td>
                    <td>New York</td>
                    <td>$98,540</td>
                </tr>
                <tr>
                    <td>Finn Camacho</td>
                    <td>Support Engineer</td>
                    <td>San Francisco</td>
                    <td>$87,500</td>
                </tr>
                <tr>
                    <td>Serge Baldwin</td>
                    <td>Data Coordinator</td>
                    <td>Singapore</td>
                    <td>$138,575</td>
                </tr>
                <tr>
                    <td>Zenaida Frank</td>
                    <td>Software Engineer</td>
                    <td>New York</td>
                    <td>$125,250</td>
                </tr>
                <tr>
                    <td>Zorita Serrano</td>
                    <td>Software Engineer</td>
                    <td>San Francisco</td>
                    <td>$115,000</td>
                </tr>
            </tbody>
        </table>
        <div id="page-selection"></div>
        <br/>
        <div class="mu-tabbable border-remove">
            <ul class="nav nav-tabs ">
                <li class="active"><a href="#tab_5_1" data-toggle="tab">Javascript</a>
                </li>
                <li><a href="#tab_5_2" data-toggle="tab">Html</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab_5_1">
<pre class="prettyprint">
$(function(){
    $('#page-selection').bootpag({
        total: 2
    }).on("page", function(event, /* page number here */ num){
        // some ajax content loading...
        var that = this;
        var markup = '<tr><td>${name}</td><td>${position}</td><td>${office}</td><td>${salary}</td></tr>';

          // Compile the markup as a named template
          $.template( "rowTemplate", markup);
          $.ajax({
            dataType: "json",
            url: '/assets/ajax/data/objects_tmpl.txt',
          })
          .done(function(result){
            // Render the template with the "employee" data and insert
            // the rendered HTML under the 'bootpag-example tbody' element
            $('#bootpag-example tbody').empty();
            $.tmpl( "rowTemplate", result.data )
                   .appendTo("#bootpag-example tbody");
            // ... after content load -> change total to 10
            $(that).bootpag({total: result.data.length/3, maxVisible: 10});
          });
    });
});
</pre>
                </div>
                <div class="tab-pane" id="tab_5_2">
                <pre class="prettyprint">
&lt;table id="bootpag-example" class="table table-striped table-bordered table-hover" &gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;名称&lt;/th&gt;
            &lt;th&gt;职位&lt;/th&gt;
            &lt;th&gt;办公地点&lt;/th&gt;
            &lt;th&gt;薪资&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;Thor Walton&lt;/td&gt;
            &lt;td&gt;Developer&lt;/td&gt;
            &lt;td&gt;New York&lt;/td&gt;
            &lt;td&gt;$98,540&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Finn Camacho&lt;/td&gt;
            &lt;td&gt;Support Engineer&lt;/td&gt;
            &lt;td&gt;San Francisco&lt;/td&gt;
            &lt;td&gt;$87,500&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Serge Baldwin&lt;/td&gt;
            &lt;td&gt;Data Coordinator&lt;/td&gt;
            &lt;td&gt;Singapore&lt;/td&gt;
            &lt;td&gt;$138,575&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Zenaida Frank&lt;/td&gt;
            &lt;td&gt;Software Engineer&lt;/td&gt;
            &lt;td&gt;New York&lt;/td&gt;
            &lt;td&gt;$125,250&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Zorita Serrano&lt;/td&gt;
            &lt;td&gt;Software Engineer&lt;/td&gt;
            &lt;td&gt;San Francisco&lt;/td&gt;
            &lt;td&gt;$115,000&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
&lt;div id="page-selection"&gt;&lt;/div&gt;
                </pre>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    window.prettyPrint();
    $(function(){
        $('#page-selection').bootpag({
            total: 2
        }).on("page", function(event, /* page number here */ num){
            // some ajax content loading...
            var that = this;
            var markup = '<tr><td>${name}</td><td>${position}</td><td>${office}</td><td>${salary}</td></tr>';

              // Compile the markup as a named template
              $.template( "rowTemplate", markup);
              $.ajax({
                dataType: "json",
                url: '/assets/ajax/data/objects_tmpl.txt',
              })
              .done(function(result){
                // Render the template with the "employee" data and insert
                // the rendered HTML under the 'bootpag-example tbody' element
                $('#bootpag-example tbody').empty();
                $.tmpl( "rowTemplate", result.data )
                       .appendTo("#bootpag-example tbody");
                // ... after content load -> change total to 10
                $(that).bootpag({total: result.data.length/3, maxVisible: 10});
              });
        });
    });
</script>
